<template>
    <div class="sign">
        <header>
            <div class="sign-left">
                <img src="~assets/img/car/date.png" alt="">
                <span>本月已签到<i>{{count}}</i>天</span>
            </div>
            <span class="sign-right">
                <i>签到攻略</i>
                <img src="~assets/img/car/right.png" alt="">
            </span>
        </header>
        <section class="main">
            <div class="round">
                <div class="inner">
                    <p v-show="!isSign" @click="sign">每日<br />签到</p>
                    <p v-show="isSign">签到<br />成功</p>
                </div>
            </div>
            <div class="my-count">
                <router-link to="/sign/mycount" class="count">我的积分</router-link>
            </div>
            <div class="notice">
                <img src="~assets/img/car/notice.png" alt="">
                湖南德熙进口大众感恩节火热开启
            </div>
        </section>
        <section class="timer">
            <template>
                <vue-event-calendar :events="demoEvents" @month-changed="monthChange"></vue-event-calendar>
            </template>
        </section>
        <div class="mb">
            <div class="back_blue">
                <img class="close" src="~assets/img/car/close.png" alt="">
                <h2>·&nbsp;&nbsp;&nbsp;签到攻略&nbsp;&nbsp;&nbsp;·</h2>
                <div v-html="config.sign"></div>
                <!--<dl>
                    <dt>
                        <h3>活动时间:</h3>
                    </dt>
                    <dd>
                        <p>2014年7月25日-9月4日</p>
                    </dd>
                    <dt>
                        <h3>活动说明:</h3>
                    </dt>
                    <dd>
                        <p>2016年1月11日-2016年1月24日期间，每位客户限抽1次</p>
                    </dd>
                    <dd>
                        <p>2、实物奖品抽中后，我们将为您免费配送至所选体验馆；到货后请凭中奖手机号（带手机）到店自提。在接到领奖通知次日起，7天内未领取的，直接取消领奖资格，实物奖品不退换、不补件。</p>
                    </dd>
                    <dd>
                        <p>3、红包奖品发放：抽中红包后，红包序列号将以短信形式发送至手机，请注意查收。</p>
                    </dd>
                    <dt>
                        <h3>领奖提示:</h3>
                    </dt>
                    <dd>
                        <p>满减及包送包安装开启时间：2016年1月16日</p>
                    </dd>
                </dl>-->
            </div>
        </div>
        <div class="sign-count">+1</div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        name:'sign',

        data() {
            return {
                list: [1,2,3,4,5,6],
                banner: [],
                demoEvents: [],
                isSign: false,
                count:0,

                config: {}
            }
        },

        components:{
            
        },

        methods: {
            sign() {
                this.axios.get('sign', { params: { id: localStorage.id } }).then(data => {
                    if (data.status == 200) {
                        this.$toast('签到成功');
                        this.isSign = true;
                        $('.sign-count').fadeIn();
                        setTimeout(function() {
                            $('.sign-count').fadeOut();
                        }, 1000);
                        this.clearToday();
                        this.getSign();
                    } else {
                        this.$toast(data.msg);
                    }
                })
            },

            clearToday() {
                let items = [].slice.call(document.querySelectorAll('.dates .item'));
                items.forEach(item => {
                    if (item.children[1]) {
                        item.removeChild(item.children[1]);
                    }
                });
            },
            
            monthChange (month) {
                this.clearToday();
                this.getSign(month);
            },

            getSign(dates = $('.cal-header .title').html()) {
                var items = [].slice.call(document.querySelectorAll('.dates .item'));
                items.forEach(item => {
                    var today = document.createElement('span');
                    today.setAttribute('class','is-today');
                    today.setAttribute('style','background:rgba(23,98,190,.4)');
                    if ( Number(item.children[0].innerHTML)) {
                        item.appendChild(today);
                        item.children[1].style.display = 'none';
                    } 
                });

                let date = dates.split('/');
                date = `${date[1]}-${date[0]}`;
                // ajax
                this.axios.get('get_day', {params:{
                    id: localStorage.id,
                    date
                }}).then(data => {
                    if (data.status == 200) {
                        let today = $('.cal-header .title').html().split('/');;
                        let nowDate = new Date();
                        let todays = nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate();
                        let todayDate = `${today[1]}-${today[0]}-${todays}`;
                        console.log(data.data);
                        console.log(todayDate);
                        console.log(data.data.indexOf(todayDate));
                        if (+dates.split('/')[0] == nowDate.getMonth() + 1) {
                            this.count = data.count;
                        }
                        if (data.data.indexOf(todayDate) != -1) {
                            this.isSign = true;
                        }
                        items.forEach(item => {
                            let itemDate = +item.children[0].innerHTML && +item.children[0].innerHTML < 10 ? '0' + item.children[0].innerHTML : item.children[0].innerHTML;
                            let signDay = `${today[1]}-${today[0]}-${itemDate}`;
                            if (data.data.indexOf(signDay) != -1 && +item.children[0].innerHTML) {
                                item.children[1].style.display = 'block';
                            }
                        })
                    } else {
                        this.$toast('服务器处理异常，请稍后再试');
                    }
                })
            }
        },

        mounted() {                
            var days = [].slice.call(document.querySelectorAll('.is-today'));
            days.forEach(day => {
                day.style.backgroundColor = 'rgba(23,98,190,.4)';
            });
            document.querySelector('.events-wrapper').style.display = 'none';
            $(document).remove($('.events-wrapper'));
            this.clearToday();

            $('.sign-right').click(() => {
                $('.mb').fadeIn();
            });
            $('.mb').click(e => {
                $('.mb').fadeOut();
            });
            $('.close').click(e => {
                $('.mb').fadeOut();
            });
            $('.back_blue').click(e => {
                e.stopPropagation();
            });
            this.getSign();

            // 获取签到规则
            this.axios.get('integral_config').then(data => {
                if (data.status == 200) {
                    this.config = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })
        },

        beforeUpdate () {

        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .sign {
        background: url('../../../assets/img/car/back.png') 0 0 no-repeat;
        width: 100%;
        min-height: 100vh;
        background-size: cover;
        padding:.4rem .45rem;
        color: #fff;
        font-size: .28rem;
        .box-sizing;
        a {
            color: #fff;
        }
        header {
            .flex-between;
            .sign-left {
                .flex-left;
                img {
                    width: .4rem;
                    height: auto;
                    margin-right: .1rem;
                }
                span {
                    letter-spacing: .05rem;
                    i {
                        color: @blue;
                    }
                }
            }
            .sign-right {
                .flex-left;
                i {
                    font-size: .24rem;
                    letter-spacing: .05rem;
                }
                img {
                    margin-left: .1rem;
                    width: .1rem;
                    height: auto;
                }
            }
        }
        .main {
            > div {
                width: 100%;
                text-align: center;
            }
            .round {
                display: flex;
                justify-content: center;
            }
            .inner {
                .bor;
                background-color:rgb(23,98,191);
                width: 1.75rem;
                height: 1.75rem; 
                font-size: .44rem;
                font-weight: bold;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: .5rem 0;
                border:15px solid rgba(23,98,191,.8);
                background-clip: padding-box;
                box-shadow: 0 0 0 15px rgba(23,98,191,.6);
            }
            .my-count {
                margin-bottom: .4rem;
                a {
                    font-size: .28rem;
                }
            }
            .notice {
                font-size: .28rem;
                margin-bottom:1rem;
                img {
                    width: .3rem;
                    height: auto;
                    vertical-align: middle;
                    margin-right: .1rem;
                }
            }
        }
        .mb {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 5;
            display: none;
            .back_blue {
                position: absolute;
                left:50%;
                top: 5%;
                width: 90%;
                background: #1660BD;
                color: #fff;
                padding: .4rem;
                .bor(10px);
                .box-sizing;
                .translate(-50%,0);
                font-size: .28rem;
                h2 {
                    font-size: .32rem;
                    text-align: center;
                    margin-bottom: .5rem;
                }
                img {
                    position: absolute;
                    right: .4rem;
                    top: .4rem;
                }
                // h3 {
                //     font-size: .3rem;
                // }
                // dl {
                //     dd,dt {
                //         line-height: 1.8;
                //     }
                // }
            }
        }
        .sign-count {
            width: 100%;
            color: #fff;
            font-size: 1rem;
            position: fixed;
            left: 0;
            top: 20%;
            text-align: center;
            display: none;
        }
        .timer {
            width: 100%;
        }
    }
</style>
<style lang="less" rel="stylesheet/less" type="text/css">
    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .is-today {
        width: .5rem;
        height: .5rem;
        border:none;
        margin-left: -.24rem;
        margin-top: -.24rem;
    }

    .__vev_calendar-wrapper .cal-wrapper .cal-header {
        background: transparent;
        div {
            color: #8DABD0;
        }
    }
    .__vev_calendar-wrapper .arrow-left.icon {
        font-size: .28rem;
    }

    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item {
        margin:.3rem 0;
    }

    .__vev_calendar-wrapper .cal-wrapper .cal-header {
        padding-bottom: .5rem;
    }

    .__vev_calendar-wrapper .cal-wrapper .cal-body .weeks {
        margin-bottom: -.1rem;
    }

    .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item .date-num, .__vev_calendar-wrapper .cal-wrapper .cal-body .weeks .item, .__vev_calendar-wrapper .cal-wrapper .cal-body .dates .item {
        font-size: .28rem;
        color: #8DABD0;
    }

    @media screen and (min-width: 768px) {
        .__vev_calendar-wrapper .cal-wrapper {
            width: 100%;
        }
    }
</style>